iT邦幫忙

第 11 屆 iThome 鐵人賽

DAY 8
0
自我挑戰組

輕鬆Vue一下系列 第 8

Day8-事件處理v-on:click

  • 分享至 

  • xImage
  •  

在vue中當然也有用來完成事件處理的屬性,那就是v-on:click。一般來說,它可以設定一些簡單的事件處理,而一些較為複雜的會透過vue中的method來進行設定。關於method的處理,後面會在介紹,因此這裡以些簡單的事件處理為範例進行介紹,如下:
v-on:click中設定了一個事件,這個事件會因為被觸發而使counter的值+1變大
https://ithelp.ithome.com.tw/upload/images/20190923/20112076YM1tcIhZRl.jpg
https://ithelp.ithome.com.tw/upload/images/20190923/20112076n2BCN2Xn7s.jpg
網頁剛加載完成時,因為counter的預設值為0,因此顯示出0次。
https://ithelp.ithome.com.tw/upload/images/20190923/20112076SKfPdV1zsq.jpg
按了8次後,數字因為counter += 1這事件而增加了,顯示出按鈕被按8次的結果。
https://ithelp.ithome.com.tw/upload/images/20190923/20112076ILS6CT7AWF.jpg
明日預告: v-bind(class)


上一篇
Day7-雙向綁定v-model(單選&複選)
下一篇
Day9-v-bind(Class)
系列文
輕鬆Vue一下30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言